<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 写css都是在style节点里面   css写了多个属性， 内联>外部>#>class>元素选择器。-->
<style type="text/css">
.class1 {
	background-color: yellow;
}

.class2 {
	font-size: 50px;
}
</style>
</head>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	//声明JQuery的初始化入口,常见的方式以$开始，里面传入一个匿名函数即可，所有的初始化写在匿名函数体里面
	$(function() {
		//	alert("goto index");
		console.info("goto index");

		//演示ID选择器，就是根据id来得到一个JQuery对象,默认用$(#ID) 得到这个对象
		alert($("#divId").size());

		//暂时用text方法可以对单个块元素设值
		$("#divId").text("这个值是从js代码里面设的值");

		//演示了类选择器，通过.class来访问
		var $classDiv = $(".class1");
		console.error("演示了类选择器  class=class1 的数量有：" + $classDiv.length);

		//如果选择器里面有多个值，那么也可以通过选择器直接对多个文本设置，
		$classDiv.text("这个值也是从js代码里面设的值！！！");

		//如果选择器有多个值，并且我要访问里面的每个值，这时候可以用JQuery对象的each方法，它里面传入一个匿名回调函数，
		//并且默认包含了一个this对象
		$classDiv.each(function(i) {
			//在JQuery对象的each匿名回调函数中，默认有一个this对象，这个this对象是DOM对象
			console.warn("我是在each循环体里面的对象" + this);

			//通过$(this) 把this dom对象转化成JQuery对象,并且赋值
			$(this).text(" 我是each里面给div class=class1的对象赋值" + i);
		})

	})

	//入口函数的另外一种写法，虽然用的不多，但是是标准写法，
	$(document).ready(
			function() {

				console.warn(" goto index from document).ready")

				//当有多个选择器的时候，如果要取得多个选择器的交集，那么多个选择器可以用，分开写在一起
				console.info("类选择器有 .class1 .class2 的对象有："
						+ $(".class1,.class2").length);

				//当有多个类选择器时候，可以获取他们选择器的交集，用两个类选择器连在一起即可   
				console.warn("类选择器有 .class1 .class2 的对象有："
						+ $(".class1.class2").length);

				//找到所有元素里面含有href属性的节点
				console.warn("有属性为href的元素数量是：" + $("a[href]").length);

				//找到所有元素里面含有href=属性的节点
				console.warn("有属性为href=www.baidu.com的元素数量是："
						+ $("a[href='www.baidu.com']").length);

				//找到当前页面所有的表单 input元素,但是意义不大
				console.warn("当前页面所有的表单 input元素：" + $(":input").length);

				//找到页面上所有的checkbox元素的数量(为例)
				console.warn("当前页面所有的表单 checkbox元素：" + $(":checkbox").length);
				
				//演示可见性选择器的使用，隐藏元素分为两种
				//一种是元素真的隐藏，不可见，可以设置它的css属性display:none 
				console.warn("当前页面所有隐藏div元素：" + $("div:hidden").length);
				
				//演示可见性选择器的使用，隐藏元素分为两种
				//一种是元素真的隐藏，不可见，可以设置它的css属性display:none 
				//第二种本身就是隐藏元素 <input  type="hidden"  也可以用可见性选择器选择器
				console.warn("当前页面所有隐藏input元素：" + $("input:hidden").length);
				
				//选择一个表单里面某个有值的元素，可以用来获取或者设置某个值（建议对某个输入框用ID选择器比较准确）
				console.warn("当前页面所有文本输入框元素：" + $(":text").val("zhanghaojie"));

			})
</script>
<body>
	<div id="divId" style="background-color: red;">this is div
		id=divID</div>
	<div id="divId1" class="class1" style="display: none">this is div id=divID1</div>
	<div id="divId2" class="class1">this is div id=divID2</div>
	<div id="divId3" class="class1">this is div id=divID3</div>
	<div id="divId4" class="class1 class2 " style="background-color: aqua">
		this is div id=divID1</div>
	<div>
		<a href="www.baidu.com">百度</a> <a href="www.163.com">163.com</a>
	</div>
	<form action="" method="post">
	       <input type="hidden" name="id" value="44">
	       <input type="hidden" name="id1" value="88">
		姓名<input type="text" name="userName"> <br> 密码<input
			type="password" name="password"> <br> 爱好: 篮球<input
			type="checkbox" value="篮球" name="like"> 足球<input
			type="checkbox" value="足球" name="like"> <br> <input
			type="submit" value="提交">
	</form>
</body>
</html>